<template>
	<div class="container">
		<div class="header-box">
			<!--<el-row class="header-box-legend-bar" :gutter="0">
				<el-col class="header-box-legend" :span="4">
					<div style="background: #0c347f;display: flex;justify-content: center;align-items: center;flex-direction: column;color: #fff;">
						<div style="width: 80px;height: 80px;background: #2d8cf0;border-radius: 50%;;display: flex;justify-content: center;align-items: center;">
							<span class="el-icon-box" style="font-size: 44px;"></span>
						</div>
						<div style="font-size: 32px;">9</div>
						<div style="font-size: 14px;">设备数量</div>
					</div>
				</el-col>
				<el-col class="header-box-primary" :span="10">
					<div style="background: #0c347f"></div>
				</el-col>
				<el-col class="header-box-warning" :span="10">
					<div style="background: #0c347f"></div>
				</el-col>
			</el-row>-->
			<div class="header-box-search-bar">
				<div>
					<span>搜索条件</span>
				</div>
				<jk-search-input class="search-bar-item-size3" placeholder="机台编号或名称" show-search></jk-search-input>
			</div>
		</div>
		<div class="content-box">
			<div
				v-for="(cellItem, cellIndex) in viewData"
				:key="cellIndex"
				class="data-item"
			>
				<div class="data-item-inner">
					<div class="data-item-inner-head">
						<div class="data-item-inner-head-icon el-icon-suitcase-1"></div>
						<div class="data-item-inner-head-right">
							<div style="font-weight: bold;font-size: 18px;">{{ cellItem.deviceRecordNumber }}</div>
							<div style="font-weight: 300;font-size: 14px;">{{ cellItem['锭号'] }}</div>
						</div>
					</div>
					<div class="data-item-inner-content">
						<el-row>
							<el-col :span="12">
								<div style="font-weight: 300;font-size: 13px;">红灯数：{{ cellItem['红灯数目'] }}</div>
								<div style="font-weight: 300;font-size: 13px;">红灯比：{{ cellItem['红灯百分比'] }}</div>
								<div style="font-weight: 300;font-size: 13px;">切纱数：{{ cellItem['切纱数量'] }}</div>
							</el-col>
							<el-col :span="12">
								<div style="font-weight: 300;font-size: 13px;">单锭效率：{{ cellItem['单锭效率-RL'] }}</div>
								<div style="font-weight: 300;font-size: 13px;">机器效率：{{ cellItem['机器效率-SL'] }}</div>
								<div style="font-weight: 300;font-size: 13px;">生产重量：{{ cellItem['重量kg'] }}KG</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    export default {
        props: {
            viewData: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {};
        }
    };
</script>
<style scoped lang="scss">
    $header_box_height: 62px;
    .container {
        width: 100%;
        height: 100%;
        background: #0c347f;
        .header-box {
            width: 100%;
            height: $header_box_height;
            background: #808695;
            padding: 16px 21px 0 21px;
            box-sizing: border-box;
            .header-box-legend-bar {
                width: 100%;
                height: calc(100% - 42px);
                display: flex;
                justify-content: center;

            }
            .header-box-search-bar {
                height: 42px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #fff;
            }
            .header-box-legend {
                width: 100%;
                height: 100%;
                background-image: linear-gradient(45deg, orange 11.2%, rgb(45, 116, 213) 91.2%);
                background: #0c347f;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .header-box-primary {
                width: 100%;
                height: 100%;
                background-image: linear-gradient(45deg, orange 11.2%, rgb(45, 116, 213) 91.2%);
            }
            .header-box-warning {
                width: 100%;
                height: 100%;
                background-image: linear-gradient(45deg, rgb(121, 137, 212) 11.2%, rgb(45, 116, 213) 91.2%);
            }
        }
        .content-box {
            height: calc(100% - #{$header_box_height});
            background: #0c347f;
            overflow: auto;
            display: flex;
            flex-wrap: wrap;
            padding: 16px;
            box-sizing: border-box;
            .data-item {
                width: calc(100% / 4);
                height: 140px;
                color: #fff;
                padding: 5px;
                box-sizing: border-box;
                .data-item-inner {
                    width: 100%;
                    height: 100%;
                    //background: #2d8cf0;
                    background-image: linear-gradient(45deg, rgb(121, 137, 212) 91.2%, rgb(45, 116, 213) 11.2%);
                    border-radius: 10px;
                    padding: 12px;
                    box-sizing: border-box;
                    .data-item-inner-head {
                        display: flex;
                        align-items: center;
                        .data-item-inner-head-icon {
                            font-size: 44px;
                            margin-right: 14px;
                            font-weight: 300;
                        }
                        .data-item-inner-head-right {
                            display: flex;
                            flex-direction: column;
                        }
                    }
                    .data-item-inner-content {
                        margin-top: 10px;
                    }
                }
            }
        }
    }
</style>
